<template>
	<view>
		<view class="plr20" style="padding-top: 160rpx;">
			<view class="bdbe plr10 align-center ">
				<view class="ft15 align-center" @click="navTo('/pages/address/areaCode')">
					<text class="mr10">{{code}}</text>
					<image src="../../static/images/address/xiahei.png" mode="aspectFill"
						style="width: 14rpx;height: 8rpx;"></image>
				</view>
				<input @input="passInput" v-model="phone" type="number" class="h40 plr20" :placeholder="$t('login').请输入手机号码"
					placeholder-class="placeholderStyle" />
			</view>
			<view class="bdbe plr10 align-center mt10 justify-between" v-if="type==0">
				<input v-model="captcha" type="number" class="h40" :placeholder="$t('login').请输入验证码"
					placeholder-class="placeholderStyle" />
				<text class="red" @click="getCode()">{{ timeDown > 0 ? timeDown + 's' : $t('login').获取验证码 }}</text>
			</view>
			<view class="bdbe plr10 align-center mt10 justify-between" v-else>
				<input v-model="password" type="password" class="h40" :placeholder="$t('login').请输入密码"
					placeholder-class="placeholderStyle" />
			</view>
			<!-- 			<view class="flex">
				<view class="mt15  justify-start" > </view>
			</view> -->
			<view class="ptb10 plr10"><text
					@click.stop="changeType">{{type==0?$t('login').密码登录:$t('login').验证码登录}}</text>
			</view>
			<mix-button ref="confirmBtn" :text="$t('login').登录" marginTop="50rpx" @onConfirm="submit"></mix-button>
			<view class="tc pt5">
				<!-- :style="{textDecoration:(lang.lang=='hk'?'underline':'none')}" -->
				<view>
					<view v-if="slang=='zh'" class="mt20" @click="changeLang({title: '繁体中文',lang: 'hk'})">
						{{$t('login').显示中文繁}}
					</view>
					<view v-else class="mt20" @click="changeLang({title: '简体中文',lang: 'zh'})">
						{{$t('login').显示中文简}}
					</view>
				</view>
				<!-- :style="{textDecoration:(lang.lang=='en'?'underline':'none')}" -->
				<view class="mt20" @click="changeLang({title: 'English',lang: 'en'})">Language English</view>
			</view>
		</view>
		<!-- 是否设置币种弹窗 -->
		<!-- 		<view>
			<u-modal :showCancelButton="true" confirmText="确定" confirmColor="#333333" cancelColor="#333333"
				cancelText="取消" width="600rpx" :show="coinshow" @cancel="cancel()" @close="cancel()"
				@confirm="confirmcoin()" title="设置币种">
				<view class="w100">
					<view class="w100 ft16 gray3 tc">
						<text>请选择您想显示的币种</text>
					</view>
					<view class="align-center w100 justify-around " style="margin-top: 50rpx;">
						<view class="align-center" v-for="(item,index) in coinLists" :key="index"
							@click="selectCoin(index)">
							<image v-if="selectActive==index" src="../../static/images/login/select.png"
								mode="aspectFill" style="width: 34rpx;height: 34rpx;"></image>
							<image v-else src="../../static/images/login/noselect.png" mode="aspectFill"
								style="width: 34rpx;height: 34rpx;"></image>
							<view class="ml5 ft16 gray3"><text>{{item.name}}</text></view>
						</view>
					</view>
				</view>
			</u-modal>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				timeDown: '',
				phone: '',
				password: '',
				captcha: '',
				coinshow: false,
				selectActive: 0,
				coinLists: [{
					name: '人民币',
					currency: 'USD'
				}, {
					name: '美元',
					currency: 'CNY'
				}],
				lang: {
					title: '简体中文',
					lang: 'zh'
				},
				code: '+86',
				slang: 'zh',
				href: ''
			}
		},
		onLoad() {
			uni.setStorageSync('lang', {
				title: '简体中文',
				lang: 'zh'
			})
			this.$i18n.locale = this.lang.lang;
			if (uni.getStorageSync('phone')) {
				this.phone = uni.getStorageSync('phone')
			}
			if (uni.getStorageSync('code')) {
				this.code = uni.getStorageSync('code')
			}
			this.hash = uni.getStorageSync('hash')
			
		},
		methods: {
			// 限制只能输入6位数字
			passInput(e) {
				const o = e.target
				const inputRule = /[^\d]/g       //数字的限制
				this.$nextTick(() => {
					this.phone = o.value.replace(inputRule, '')
					if (this.phone.length > 0) {      //限制长度
						this.phone = this.phone.slice(0, 11)
					}
				})
			},
			//选择区号
			chooseCode(item) {
				console.log(item)
				this.code = item.code
				uni.setStorageSync('code', this.code)
			},
			changeType() {
				this.type = this.type == 0 ? 1 : 0
				this.captcha = ''
				this.password = ''
			},
			//获取验证码
			getCode() {
				if (this.timeDown > 0) {
					return;
				}
				this.$utils.throttle(() => {
					const phone = this.phone;
					if (!this.phone) {
						return this.$utils.msg(this.$t('login').请输入手机号码);
					}
					this.$api.smsSend({
						phone: phone,
						event: 'mobilelogin',
						area_code: this.code
					}).then((res) => {
						if (res && res.code == 1) {
							this.$utils.msg(res.msg);
							this.countDown(60);
						}
					})
				}, 2000)
			},
			//倒计时
			countDown(timer) {
				timer--;
				this.timeDown = timer;
				if (timer > 0) {
					setTimeout(() => {
						this.countDown(timer);
					}, 1000)
				}
			},
			// 
			cancel() {
				this.coinshow = false
			},
			async confirmcoin() {
				this.coinshow = false
				uni.setStorageSync('currency', this.coinLists[this.selectActive].currency)
				this.$store.commit("saveCurrency", this.coinLists[this.selectActive].currency)

			},
			selectCoin(index) {
				this.selectActive = index
			},
			async submit() {
				if (!this.phone) {
					return this.$utils.msg(this.$t('login').请输入手机号码);
				}
				if (this.type == 0) {
					if (!this.captcha) {
						return this.$utils.msg(this.$t('login').请输入验证码);
					}
				} else {
					if (!this.password) {
						return this.$utils.msg(this.$t('login').请输入密码);
					}
				}
				uni.setStorageSync('phone', this.phone)
				let res;
				if (this.type == 0) {
					res = await this.$api.code_login({
						phone: this.phone,
						captcha: this.captcha,
						area_code: this.code
					})

				} else {
					res = await this.$api.login({
						phone: this.phone,
						password: this.password,
						area_code: this.code

					})
				}
				if (res && res.code == 1) {
					uni.setStorageSync('userInfo', res.data.userinfo)
					uni.setStorage({
						key: 'logintoken',
						data: res.data.userinfo.token,
						success: () => {
							this.$store.dispatch('getuserInfo')
							setTimeout(() => {
								console.log(this.hash)
								if (!this.hash) {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								} else {
									uni.reLaunch({
										url: this.hash.slice(1)
									})
									uni.removeStorageSync('hash')
								}
							}, 600)
						}
					})
					if (uni.getStorageSync('lang').lang != 'zh') {
						const res = await this.$api.profile({
							area: 2
						})
					}
				}
				if (res && res.code == -2) {
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/notLogin'
						})
					}, 600)
				}
			},
			// 选择语言
			changeLang(type) {
				if (this.lang.lang != type.lang) {
					this.lang = type
					if (type.lang != 'en') {
						this.slang = type.lang
					}
					uni.setStorageSync('lang', this.lang)
					this.$i18n.locale = this.lang.lang;
					uni.setStorageSync("mescroll-i18n",  this.lang.lang)
					uni.setNavigationBarTitle({
						title: this.$t('login').登录
					})
					this.changeFooter()
				} else {
					// this.lang = {
					// 	title: '简体中文',
					// 	lang: 'zh'
					// }
					// uni.setStorageSync('lang', {
					// 	title: '简体中文',
					// 	lang: 'zh'
					// })
					// this.$i18n.locale = this.lang.lang;
					// uni.setNavigationBarTitle({
					// 	title: this.$t('login').登录
					// })
					// this.changeFooter()
				}
				this.$store.dispatch('changecLang')
			},
			changeFooter() {
				uni.setTabBarItem({
					index: 0,
					text: this.$t('common').首页,
				}, )
				uni.setTabBarItem({
					index: 1,
					text: this.$t('common').粉丝管理,
				}, )
				uni.setTabBarItem({
					index: 2,
					text: this.$t('common').我的,
				}, )
			}
		}
	}
</script>

<style>
	page {
		background: #ffffff;
	}
</style>